<template>
  <div class="home">
    <!-- 首页轮播图 van-swipe -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in imagesUrl" :key="item.id">
        <img :src="item.img">
      </van-swipe-item>
    </van-swipe>
    <!-- 六宫格导航 van-grid -->
    <van-grid :border="false" :column-num="3" square route>
      <van-grid-item to="/news">
        <img src="../../assets/images/menu1.png">
        <p>新闻资讯</p>
      </van-grid-item>
      <van-grid-item to="/imgShare">
        <img src="../../assets/images/menu2.png">
        <p>图片分享</p>
      </van-grid-item>
      <van-grid-item to="/shopping">
        <img src="../../assets/images/menu3.png">
        <p>商品购买</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../../assets/images/menu4.png">
        <p>留言反馈</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../../assets/images/menu5.png">
        <p>视频专区</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../../assets/images/menu6.png">
        <p>联系我们</p>
      </van-grid-item>
    </van-grid> 
  </div>
</template>

<script>
export default {
  data() {
    return {
      imagesUrl: [],
    }
  },
  methods: {
    async getSwipe() {
      const { data: res } = await this.$http.get("/api/getlunbo")
      this.imagesUrl = res.message
    }
  },
  created() {
    this.getSwipe()
  }
};
</script>
<style lang="less">
img{
    object-fit: cover !important;
}
.van-swipe {
  height: 200px;
  img {
    width: 100%;
    height: 200px;
  }
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #eee;
}
.van-grid {
  img {
    width: 60px;
  }
  .van-grid-item {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    padding: 12px 10px;
    background-color: #fff;
  }
  p {
    font-size: 14px;
  }
}

</style>
